import { Wrapper } from "./styles";
import { Button, Tooltip } from "antd";
import { Separator } from "@shadcn/separator";
import { NoteCard } from "./components/NoteCard";
import { useViewModel } from "./model.view";
import { SyncOutlined } from "@ant-design/icons";

export function XHSNotes() {
  const { onNoteClick, globalModel, noteUnreads, onSyncClick } = useViewModel();

  const notes = globalModel.notes;
  const isUpdating = !Object.values(globalModel.updating ?? {}).find((v) => v);

  return (
    <Wrapper className={"xhs-comments"}>
      <div className={"note-controller"}>
        <div className={"note-controller__left"}>
          全部笔记{" "}
          {isUpdating && (
            <Tooltip title={"刷新"} trigger={"hover"}>
              <span className={"sync-btn"}>
                <SyncOutlined onClick={onSyncClick} />
              </span>
            </Tooltip>
          )}
        </div>
        <div>
          <Button type={"primary"} size={"small"} disabled={true}>
            筛选
          </Button>
          <Button type={"primary"} size={"small"} disabled={true}>
            排序
          </Button>
        </div>
      </div>
      <Separator />
      <div className={"note-list"}>
        {notes?.map((record) => (
          <NoteCard
            key={record.noteId}
            note={record}
            unread={noteUnreads[record.noteId]}
            onClick={onNoteClick(record)}
            selected={globalModel.discussion?.note.noteId === record.noteId}
          />
        ))}
      </div>
    </Wrapper>
  );
}
